<template>
	<view class="page-total">
		<view class="tab-list">
			<view class="list" v-for="(item,index) in TabBarList" @click="onTabBar(item,index)"
				:style="{marginTop: (index == 2) ?  '-18rpx' : '0rpx'}" :key="index">
				<image class="img" :src="item.acImg" v-show="tabBarShow === index"
					:style="{width: (index == 2) ?  '98rpx' : '46rpx',height: (index == 2) ?  '64rpx' : '46rpx',borderRadius: (index == 2) ?  '12rpx' : '0rpx'}">
				</image>
				<image class="img" :src="item.img" v-show="tabBarShow != index"
					:style="{width: (index == 2) ?  '98rpx' : '46rpx',height: (index == 2) ?  '64rpx' : '46rpx',borderRadius: (index == 2) ?  '12rpx' : '0rpx'}">
				</image>

				<!-- background: (index == 2) ?  'red' : '' -->
				<text :class="['text',{'action':tabBarShow===index}]"
					:style="{marginTop: (index == 2) ?  '4rpx' : '0rpx'}">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabBarList: [{
						index: 0,
						name: '首页',
						img: this.$common.imgUrl() +'/tabbar/index@2x.png',
						acImg:this.$common.imgUrl() +'/tabbar/index_click@2x.png',
						count: 0,
					},
					{
						index: 1,
						name: '工会',
						img: this.$common.imgUrl() +'/tabbar/guorun@2x.png',
						acImg: this.$common.imgUrl() +'/tabbar/guorun_click@2x.png',
						count: 0,
					},
					{
						index: 2,
						name: '',
						img: this.$common.imgUrl() +'/tabbar/dashui@2x.png',
						acImg: this.$common.imgUrl() +'/tabbar/dashui_click@2x.png',
						count: 0,
					},
					{
						index: 3,
						name: '我的社区',
						img: this.$common.imgUrl() +'/tabbar/shequn@2x.png',
						acImg: this.$common.imgUrl() +'/tabbar/shequn_click@2x.png',
						count: 0,
					},
					{
						index: 4,
						name: '我的',
						img: this.$common.imgUrl() +'/tabbar/me@2x.png',
						acImg: this.$common.imgUrl() +'/tabbar/wode@2x.png',
						count: 0,
					},
				],
				codeheight: 0,
				isOverall: 0,
				phoneModel: '',
				imgDm: '',
			};
		},
		props: {
			tabBarShow: {
				type: Number,
				default: 0,
			}
		},
		computed: {

		},
		created() {},
		onReady() {
			// uni.hideTabBar();
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				let that = this;
				// 获取系统信息
				uni.getSystemInfo({
					success(res) {
						that.codeheight = Math.round(res.screenHeight);
						that.phoneModel = res.model
						if (res.model.search('iPhone')) {
							that.isOverall = 0;
						} else if (Math.round(res.screenHeight) > 740) {
							that.isOverall = 1;
						}
						// console.log(that.isOverall);
					}
				});
			} catch (e) {
				// error
			}
		},
		methods: {
			/**
			 * @param {Object} item
			 * @param {Number} index
			 */
			onTabBar(item, index) {
				// this.tabBarShow = index;
				switch (index) {
					case 0:
						// uni.reLaunch({
						// 	url: '/pages/index/home'
						// })
						break;
					case 1:
						// uni.reLaunch({
						// 	url: '/pages/index/discuss'
						// })
						break;
					case 2:
						uni.redirectTo({
							url: '/pages/index/home'
						})
						break;
					case 3:
						// uni.reLaunch({
						// 	url: '/pages/index/zlMessage'
						// })
						break;
					case 4:
						uni.redirectTo({
							url: '/pages/index/my'
						})
						break;
				}
			},
			setTabbarCouont(index, count) {
				this.$set(this.TabBarList[index], 'count', count);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'cc-myTabbar.scss';
</style>
